<template>
  <div class="app-container">
    <div class="teble-btns">
      <el-upload
        v-model:file-list="fileList"
        action=""
        :on-change="onChangeFile"
        accept=".xls, .xlsx"
        :auto-upload="false"
        :show-file-list="false"
        style="margin-bottom: 15px;"
      >
        <el-button  type="primary">导入</el-button>
      </el-upload>
      <el-button type="primary" @click="updateFormula">公式定义</el-button>
    </div>
    <el-table v-loading="loading" :data="configList">
      <!-- <el-table-column label="系统时间" align="center" prop="data0" :show-overflow-tooltip="true"/>
      <el-table-column label="Speed1" align="center" prop="data1" :show-overflow-tooltip="true" />
      <el-table-column label="Speed2" align="center" prop="data2" :show-overflow-tooltip="true" />
      <el-table-column label="Torque1" align="center" prop="data3" :show-overflow-tooltip="true" />
      <el-table-column label="Torque2" align="center" prop="data4" :show-overflow-tooltip="true" />
      <el-table-column label="Pm1" align="center" prop="data5" :show-overflow-tooltip="true" />
      <el-table-column label="Pm2" align="center" prop="data6" :show-overflow-tooltip="true" />
      <el-table-column label="控制器温度[℃]" align="center" prop="data7" :show-overflow-tooltip="true" />
      <el-table-column label="电机温度[℃]" align="center" prop="data8" :show-overflow-tooltip="true" />
      <el-table-column label="电机油温[℃]" align="center" prop="data9" :show-overflow-tooltip="true" />
      <el-table-column label="出水温度[℃]" align="center" prop="data10" :show-overflow-tooltip="true" />
      <el-table-column label="出水流量[1/min]" align="center" prop="data11" :show-overflow-tooltip="true" />
      <el-table-column label="回水温度[℃]" align="center" prop="data12" :show-overflow-tooltip="true" />
      <el-table-column label="输出电压[V]" align="center" prop="data13" :show-overflow-tooltip="true" />
      <el-table-column label="输出电流[A]" align="center" prop="data14" :show-overflow-tooltip="true" />
      <el-table-column label="RT_转矩偏差[Nm]" align="center" prop="data15" :show-overflow-tooltip="true" />
      <el-table-column label="扭矩和[Nm]" align="center" prop="data16" :show-overflow-tooltip="true" />
      <el-table-column label="Udc" align="center" prop="data17" :show-overflow-tooltip="true" />
      <el-table-column label="Idc" align="center" prop="data18" :show-overflow-tooltip="true" />
      <el-table-column label="电功率[kw]" align="center" prop="data19" :show-overflow-tooltip="true" />

      <el-table-column label="Spd[r/min]" align="center" prop="data20" :show-overflow-tooltip="true" />
      <el-table-column label="Tq[Nm]" align="center" prop="data21" :show-overflow-tooltip="true" />
      <el-table-column label="机械功率[km]" align="center" prop="data22" :show-overflow-tooltip="true" />
      <el-table-column label="效率[%]" align="center" prop="data23" :show-overflow-tooltip="true" /> -->
      <el-table-column v-for="item in columns" :key="item.label" :width="item.width" :label="item.label" align="center" :prop="item.value" :show-overflow-tooltip="true" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="pageNum"
      v-model:limit="pageSize"
      @pagination="getList"
    />
    <update-formula-modal ref="updateFormulaModalRef" />
  </div>
</template>

<script setup name="Config">
import * as xlsx from "xlsx";
import { cloneDeep } from "lodash-es";
import dayjs from "dayjs";
import useDemoState from '@/store/modules/demo'
import { buildUUID } from "@/utils/index.js";
import UpdateFormulaModal from "./modules/updateFormulaModal.vue"
const { proxy } = getCurrentInstance();

const configList = ref([]);
const loading = ref(true);
const total = ref(0);

const columns = useDemoState().columns;

const pageNum = ref(1);
const pageSize = ref(10);

const fileList = ref([])

const updateFormulaModalRef = ref();
function calculateAverageSpeed(speed1, speed2) {
  return (speed1 + speed2) / 2;
}
function f(x) {
  return x * x; 
}
// 选择文件
async function onChangeFile(file){
  try {
    loading.value = true;
    const fileData = file.raw;
    let dataBinary = await readFile(fileData);
    let workBook = xlsx.read(dataBinary, { type: "binary", cellDates: true })
    let workSheet = workBook.Sheets[workBook.SheetNames[0]]
    const excelData = xlsx.utils.sheet_to_json(workSheet,{ header: 1 })
    console.log(excelData);
    let list = [];
    for (let i = 1; i < excelData.length; i++) {
      const item = excelData[i];
      let json = {
        id:buildUUID()
      };
      for (let j = 0; j < item.length; j++) {
        const el = item[j];
        json["data" + j] = el ? el : "";
        if(json.data1 && json.data2){
          const aa = calculateAverageSpeed(json.data1, json.data2);
          const bb = f(aa);
          json.data20 = bb.toFixed(3);
        }
        if(json.data3 && json.data4){
          json.data21 = (json.data3 + json.data4).toFixed(3);
        }
        if(json.data20 && json.data21){
          json.data22 = ((json.data20 * json.data21) / 9550).toFixed(3);
        }
        if(json.data19 && json.data22){
          if (json.data19 > json.data22) {
            json.data23 = ((json.data22 / json.data19) / 100).toFixed(3);
          }
          if (json.data19 < json.data22) {
            json.data23 = ((json.data19 / json.data22) * 100).toFixed(3);
          }
        }
      }
      list.push(json);
    }
    console.log(list)
    const initData = useDemoState().getInitDataList;
    list = list.concat(initData);
    useDemoState().setInitDataList(list);
    getList({page:1,limit:10});
  } catch (error) {
    console.log(error)
    loading.value = false;
  }
}
function readFile (file){
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = (e) => {
      resolve(e.target.result);
    }
  })
}

function getList(data){
  loading.value = false;
  const startSize = data.page == 1 ? 0 : (data.page - 1) * data.limit;
  const list = cloneDeep(useDemoState().getInitDataList);
  for (let i = 0; i < list.length; i++) {
    const item = list[i];
    item.data0 = dayjs().format("YYYY-MM-DD HH:mm:ss");
  }
  configList.value = list.splice(startSize, data.limit);
  total.value = useDemoState().getInitDataList.length;
}
getList({page:1,limit:10});


// 修改公式
function updateFormula() {
  updateFormulaModalRef.value.init();
}


</script>
<style scoped>
.teble-btns{
  display: flex;
  column-gap: 15px;
}
</style>